<script setup lang='ts'>

</script>

<template>
    <div class="head">
        <slot name="head"></slot>
    </div>
    <div class="body">
        <!-- 默认插槽 -->
        <slot name="default"></slot><br>
        <slot name="body"></slot>
    </div>
    <div class="footer">
        <slot name="footer"></slot>
    </div>

</template>

<style scoped>
.head,
.body,
.footer {
    width: 100%;
    height: 400px;
    background-color: pink;
}

.body {
    background-color: orange;
    height: 600px;
    overflow-y: auto;
    flex: 1;
    display: flex;

}

.footer {
    background-color: cyan;
}
</style>